// =============================================================================
// SCSS/SITE/STACKS/INTEGRITY/_COLOPHON.SCSS
// -----------------------------------------------------------------------------
// Styles for the site's footer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-colophon {
  position: relative;
  border-top: 1px solid $colophonFirstBorder;
  background-color: $baseModBackground;
  @include box-shadow(#{$colophonFirstBoxShadow});

  + .x-colophon {
    border-top: 1px solid darken($baseModBackground, 12%);
    border-top: 1px solid $colophonBorderTopRgba;
    @include box-shadow(#{$colophonBoxShadow});
  }

  &.top {
    padding: 5% 0 5.25%;

    [class*="span"] {
      .widget:first-child {
        margin-top: 0;
      }
    }

    @include break(cubs) {
      padding: 6.5% 0;

      [class*="span"] {
        .widget:first-child {
          margin-top: 3em;
        }
      }

      [class*="span"]:first-child {
        .widget:first-child {
          margin-top: 0
        }
      }
    }
  }

  &.bottom {
    padding: 10px 0;
    @include font-size(1.0);
    text-align: center;
    color: $textColor;

    .x-nav {
      margin: 10px 0;
      line-height: 1.3;

      li {
        margin: 0 0.5em;
        display: inline-block;

        a {
          display: block;
          font-weight: 400;
          letter-spacing: 2px;
          text-transform: uppercase;

          &:hover {
            background-color: transparent;
          }
        }
      }
    }

    .x-social-global {
      margin: 10px 0;
      a {
        margin: 0 1.25%;
        @include font-size(2.1);
      }
    }

    .x-colophon-content {
      margin: 30px 0 10px;
      font-weight: 400;
      letter-spacing: 2px;
      line-height: 1.3;
    }
  }

  .widget {
    margin-top: 3em;
  }
}